<template>
	<view class="bg-white">
		<titleBar title="发表图文" isReturn="true"></titleBar>
		<view class="content">
			<view class="container">
				<view class="uni-form-item uni-column user-input searcher">
					<view class="title">标题:</view>
					<view class="input">
						<input class="uni-input" maxlength="15" v-model="form.title" @blur="inputBlur" name="title" />
					</view>
				</view>
				<textarea placeholder="内容描述" @blur="inputBlur" :focus="inputFocus" :auto-height="true"
					:show-confirm-bar="false" maxlength="300" v-model="form.remark" class="post-txt"></textarea>
				<!-- 输入框 -->
				<textarea placeholder="请输入正文内容,欢迎大家投稿-_-" @blur="inputBlur" :focus="inputFocus" :auto-height="true"
					:show-confirm-bar="false" maxlength="1500" v-model="form.content" class="post-txt"></textarea>

				<!-- 上传图片 -->
				<view class="img-list">
					<view v-for="(item,index) in form.imageList" :key='index' class="img-list-box">
						<image :src="item" class="img-item" @tap="imgTypeSelect(item,index)"></image>
					</view>
					<view v-if="form.imageList.length < 9 " class="icon-camera" @tap="selectType">
						<uni-icons type="camera-filled" size="27" color=#D3D4D6></uni-icons>
					</view>
				</view>
			</view>
			<!-- 选择板块 -->

			<!-- 底部确定按钮 -->
			<view @click="clickCreate" class="yue-base-button">
				<view>确定发布~</view>
			</view>
		</view>


	</view>
</template>

<script>
	import titleBar from '../../../components/titleBar/titleBar.vue'
	import mpHtml from '../../../components/mp-html/mp-html.vue'
	import dateTime from '../../../components/time.js'
	export default {
		data() {
			return {
				title: 'Release',
				// 默认输入框获得焦点
				inputFocus: true,
				form: {
					content: '',
					imageList: [],
					title: '',
					remark: '',
					createName: JSON.stringify(uni.getStorageSync("name")),
					createDate: JSON.stringify(dateTime())
				},
				token: ''
			}
		},
		onLoad() {
			console.log(dateTime());
		},
		methods: {
			// 选择媒体类型
			selectType() {
				let that = this
				let itemL = ['拍照', '从相册选择照片']
				uni.showActionSheet({
					itemList: itemL,
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								sourceType: ['camera'], // 拍照选择
								success: function(res) {
									//用于页面的展示，文件未上传
									res.tempFilePaths.forEach(path => {
										that.form.imageList.push(path);
										// 发给oss 待写
									})
									var tempFilePaths = res.tempFilePaths;
									for (let temp of tempFilePaths) {
										console.log(88, temp);
										// 图片上传服务器
										uni.uploadFile({


											url: 'https://www.turkeylike.cn:8900/fzulab/userUpImg/up',
											filePath: temp,
											name: 'file',

											formData: {
												//iFile:tempFilePaths[0], // 这里一定不能加,加了 iOS 图片上传会失败
												token: uni.getStorageSync("token"),
											},
											// 请求头一定要加，否则 iOS 图片上传会失败
											header: {

												'content-type': 'multipart/form-data'
											},

											success: res => {

												console.log(res.data)
												let param_json = JSON.parse(res.data);
												console.log(param_json.result.fileurl)
												// JSON.stringify(res.data)//转为字符串
											},
										});
									}
								}
							});
						}
						if (res.tapIndex == 1) {
							uni.chooseImage({
								count: 9 - that.form.imageList.length,
								sourceType: ['album'], //从相册选择
								success: function(res) {
									console.log(res);
									//用于页面的展示，文件未上传
									res.tempFilePaths.forEach(path => {
										that.form.imageList.push(path);
										// 发给oss 待写
									})
									var tempFilePaths = res.tempFilePaths;
									for (let temp of tempFilePaths) {
										console.log(88, temp);
										// 图片上传服务器
										uni.uploadFile({


											url: 'https://www.turkeylike.cn:8900/fzulab/userUpImg/up',
											filePath: temp,
											name: 'file',

											formData: {
												//iFile:tempFilePaths[0], // 这里一定不能加,加了 iOS 图片上传会失败
												token: uni.getStorageSync("token"),
											},
											// 请求头一定要加，否则 iOS 图片上传会失败
											header: {

												'content-type': 'multipart/form-data'
											},

											success: res => {

												console.log(res.data)
												let param_json = JSON.parse(res.data);
												console.log(param_json.result.fileurl)
												// JSON.stringify(res.data)//转为字符串
											},
										});
									}


								}
							});
						}

					}
				});
			},

			// 图片状态选择
			imgTypeSelect(item, index) {
				let that = this
				uni.showActionSheet({
					itemList: ['预览', '删除'],
					success: function(res) {
						if (res.tapIndex == 0) {
							console.log('预览');
							uni.previewImage({
								urls: that.form.imageList,
								current: index,

							});
						}
						if (res.tapIndex == 1) {
							let indexi = that.form.imageList.findIndex(url => url === item);
							if (indexi !== -1) {
								that.form.imageList.splice(indexi, 1);
							}
						}
					}
				});
			},


			// 文字内容
			inputBlur(event) {
				this.inputCursor = event.detail.cursor;
				this.inputFocus = false;
			},

			// 发布
			clickCreate() {
				this.token = uni.getStorageSync('token')
				console.log(this.form.createName);
				console.log(this.form);
				console.log(this.form.imageList);
				console.log(this.form.content);
				console.log(this.form.title);
				console.log(this.form.remark);
				console.log(this.form.createDate);

				if (!this.form.content) {
					uni.showToast({
						title: "请输入内容噢",
						icon: "error"
					})
					return;
				}
				// this.$request.post("https://www.turkeylike.cn:8900/fzulab/article/update", {
				// 	"type": 2,
				// 	"content": this.form.content,
				// 	"titleImgUrl":this.form.imageList
				// }).then((res) => {
				// 	if (res.message == '保存成功') {
				// 		uni.showToast({
				// 			title: '发布成功',
				// 			duration: 1500,
				// 			mask: true
				// 		});
				// 		setTimeout(() => {
				// 			uni.redirectTo({
				// 				url: '/pages/article/article'
				// 			});
				// 		}, 1500)
				// 	}
				// })
				uni.request({
					url: "https://www.turkeylike.cn:8900/fzulab/userUpImg/save",
					method: 'POST',
					header: {
						'content-type': 'application/json;charset:utf-8',
						'token': this.token
					},
					data: {
						columnId: 3,
						remark: this.form.remark,
						title: this.form.title,
						createName: this.form.createName,
						content: this.form.content,
						createDate: this.form.createDate,
						titleImgUrl: this.form.imageList,
					},
					success(res) {
						console.log(res);
						uni.showToast({
							title: '发布成功',
							duration: 1500,
							mask: true
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/article/article'
							});
						}, 1500)

					}



				})

			},
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		background-color: #FFFFFF;
		border-radius: 30upx 30upx 0upx 0upx;
	}

	.container {
		padding: 20rpx 40rpx;
		overflow: hidden;
	}

	.user-input {
		width: 320px;
		margin: auto;
		display: flex;
		font-size: 20px;

		.input {
			width: 200px;
			border: 1px solid gray;
			border-radius: 5px;
		}
	}



	.post-txt {
		width: 100%;
		min-height: 300rpx;
		line-height: 1rpx;
		margin-top: 10px;
	}


	.yue-base-button {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
		width: 100%;
		padding: 40rpx 0;
		z-index: 3;
	}

	.yue-base-button view {
		width: 560rpx;
		text-align: center;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 96rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		background: #07C062;
	}

	.icon-camera {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 210rpx;
		height: 210rpx;
		border-radius: 6rpx;
		margin: 5rpx 0rpx 0rpx 5rpx;
		background-color: #f4f5f7;
	}

	.img-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.img-list-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.img-item {
		width: 210rpx;
		height: 210rpx;
		margin: 5rpx;
		border-radius: 6rpx;

	}
</style>
